<!--
 * @Author: ChunLai
 * @Date: 2022-04-18 15:25:30
 * @LastEditTime: 2025-07-21 13:43:15
 * @Description: 固定宽度的table表格,不可滑动
 * @FilePath: \02.bldinsure\src\views\count\components\FixedTable.vue
-->
<template>
  <div class="fixed-table-module">
    <table
      border="0"
      cellspacing="0"
      cellpadding="0"
      style="
        width: 100%;
        border-right: 1px solid #cacaca;
        border-bottom: 1px solid #cacaca;
      "
    >
      <thead>
        <tr>
          <th
            :class="['risk-table-border', th.width ? th.width : '']"
            v-for="(th, index) in headList"
            :key="`head-th-${index}`"
          >
            {{ th.value }}
          </th>
        </tr>
      </thead>
      <tbody>
        <template>
          <tr v-for="(item, index) in bodyList" :key="`body-tr-${index}`">
            <td
              :class="['risk-table-border', td.width ? td.width : '']"
              v-for="(td, bid) in headList"
              :key="`body-td-${bid}`"
              v-html="item[td.name]"
            ></td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "FixedTable",
  props: ["headList", "bodyList"],
};
</script>

<style lang="less" scoped>
.risk-table-border {
  width: 50%;
  padding: 4px 0;
  text-align: center;
  border-left: 1px solid #cacaca;
  border-top: 1px solid #cacaca;

  &.w20 {
    width: 20%;
  }

  &.w30 {
    width: 30%;
  }

  &.w50 {
    width: 50%;
  }
  &.w40 {
    width: 40%;
  }
  &.w60 {
    width: 60%;
  }
}
</style>
